<template>
	<div class="">
		<!--滚动内容 start-->
		<el-scrollbar class="app-container-scroll-bar">
		
			<listTpml :data="pageData" @onCommand="handleCommand" ref="listTpml"></listTpml>
			
    </el-scrollbar>
    <!--滚动内容 end -->
		
		
		<!--弹窗内容 start-->
		<div class="app-output-window">
			
			<updateVersion
				ref="updateVersion"
				@addSucess="refresh()"
				></updateVersion>
				
		</div>
		<!--弹窗内容 end-->
		
	</div>
</template>

<script>
import listTpml from "@/view/components/listTmpl";
import { deleteTemplate , getTemplateStatus} from "@/service/swagger/AcTemplateController";
import { upgradeFile } from "@/service/swagger/AppBuilderController.js";
import {tmpStatusFilter} from '@/filters/status/index';
import {tmplTypeFilter} from '@/filters/type/index';
import updateVersion from "@/view/components/dialog/updateVersion";

import {listenner} from "@/utils/statuslistener" ;
import {checkStatus} from '@/utils/common.js'
export default {
  components: {
    listTpml,
    updateVersion,
  },
  data() {
    return {
      pageData: {
        pageTitle: "容器",
        filterOption: [
          {
            label: "名称", // label名
            paramsName: "name", // 出参name值
            defaultValue: "", // 出参默认值
            componentsName: "nameInput" // 组件名
          },
          {
            label: "状态", // label名
            paramsName: "status", // 出参name值
            defaultValue: this.$route.query.status||this.$route.query.status==0 ? this.$route.query.status : "", // 出参默认值
            componentsName: "yinyongStatusSelect" // 组件名
          },
        ],
        // 列表table 设置
        listOption: {
          // 列表上部btn组
          listBtns: [
            {
              label: "新建模板",
              iconfont: "icon-folder-add",
              commandName: "add"
            }
          ],
          // 列表api
          listApi: {
            url: "/appcloud-data/api/template/list",
            type: "POST",
            params:{
              templateType:1,
              deployType : 1,
            }
          },
          // 表头设置
          header: [
            {
              label: "名称",
              propName: "name",
              align: "left"
            },
            {
              label: "应用类型",
              propName: "appType"
            },
            {
              label: "当前版本",
              propName: "appVersion"
            },
            {
              label: "部署类型",
              html:(row)=>{
              	return tmplTypeFilter(row.deployType);
              }
            },
            {
              label: "状态",
              width: "",
              propName: "status",
              html : (row)=>{
								return tmpStatusFilter(row.status)
							},
            },
            {
              label: "实例数",
              width: "",
              propName: "instCounts",
              commandName:'goSL'
            },
            {
              label: "创建时间",
              width: "180",
              propName: "createTime"
            },
            {
              label: "操作",
              width: "290",
              align: "right",
              btns: [ {
                  label: "部署",
                  commandName: "deploy",
                  show:(row)=>{
                  	return row.status == 1 ;
                  }
                },{
                  label: "详情",
                  commandName: "goDetail"
                },
                {
                  label: "删除",
                  commandName: "deleteRQ",
                 	show:(row)=>{
                    return row.status == 1 || row.status == 3;
                  }
                },
              ],
              btnGroups: [
               {
                  label: "升级",
                  commandName: "update",
                  show:(row)=>{
                  	return row.status == 1 && row.upgrade == 1 ;
                  }
                },
                {
                  label: "实例",
                  commandName: "goSL",
                  show:(row)=>{
                  	return row.status == 1 ;
                  }
                },
               ]
            }
          ]
        }
      }
    };
  },
  methods: {
    handleCommand(command,row,index){
				console.log(command,row,index)
				if(command&&this[command]){
					this[command](row,index)
				}else{
          this.$router.push({
            path:command,
            query:{
              id:row.templateId || "",
            }
          })
        }
    },
    
    goDetail(row,index){
    	this.$router.push({
				path:'rq/xq',
				query:{
          appType:'yingyong',
          id: row.templateId || "",
				}
			})
    },
    deleteRQ(row){
      this.$confirm("确定删除该容器？", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
        .then(() => {
          deleteTemplate(row.templateId).then(ret => {
            if (ret && ret.code == 0) {
              this.refresh()
              this.$message({showClose: true,message: '删除成功！',type: 'success'})
            }
          })
      })
    },
    update(row){
      upgradeFile(row.templateId).then(ret=>{
        if(ret&&ret.code == 0){
          this.$refs.updateVersion.init({
            sourceTemplateId : row.templateId,
            appVersion : row.appVersion,
          }).open(ret.data)
        }
      })
			// this.$refs.updateVersion.init({
			// 	sourceTemplateId : row.templateId,
			// 	appVersion : row.appVersion,
			// }).open();
		},
    listLoaded(tableData){
      let _this = this
      checkStatus(tableData,_this,tmpStatusFilter,getTemplateStatus)
			// console.log("页面列表 search 完成", tableData);
			// const statusStatic = (status) => {
			// 	// 是否是稳定状态
			// 	const isStatic = !(tmpStatusFilter(status).indexOf("...") > -1);
			// 	return isStatic;
			// }
			
			// let unStaticArr = [];
			// // 添加  status 监听
			// tableData.forEach(el => {
			// 	if (!statusStatic(el.status)) {
			// 		unStaticArr.push(el.templateId)
			// 	}
			// });
			// if (unStaticArr && unStaticArr.length) {
			// 	listenner({
			// 		api: {
			// 			serviceFN: getTemplateStatus,
			// 			params: unStaticArr,
			// 		},
			// 		callBack: (ret) => {

			// 			let hasAllStatusStaticed = true;
			// 			ret.data.forEach(data => {
			// 				if (!statusStatic(data.status)) {
			// 					hasAllStatusStaticed = false;
			// 				}
			// 				tableData.forEach(el => {
			// 					if (data.templateId == el.templateId) {
			// 						el.status = data.status;
			// 					}
			// 				});
			// 			});
			// 			this.$refs.listTpml.loadTableData(tableData)
			// 			return hasAllStatusStaticed;
			// 		},
			// 	}, this)
			// }
    },
    refresh(){
			this.$refs.listTpml.search();
		},
		add(){
			this.$router.push({
				path : "add",
				query : {
					deployType : 1 ,
				}
			})
		},
		deploy(row){
			this.$router.push({
				path : "deploy",
				query : {
					id : row.templateId ,
					deployType : 1 ,
				}
			})
		},
		goSL(row){
			this.$router.push({
				path : "/sl/yy",
				query : {
					id : row.templateId ,
				}
			})
		},
		
  }
};
</script>

<style>
</style>